<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <div>
            <input v-focus v-border type="text" name="" id="" placeholder="请输入">
        </div>
        <h3 v-demo v-my-color>wuhan2110-daydayup</h3>
        <div v-my-show="show" v-my-bg="bg" v-my-text:click.stop.once="changetext">
            wh2110-啥也不是
        </div>
        <button @click="show=!show">点击切换</button>
        <button v-my-on:click.stop="changecount">Add - {{count }}</button>
    </div>
</body>
<script>
    // 全局注册指令
    Vue.directive("focus", {
        inserted(el) {  // el 表示指令插入的dom
            el.focus()
        }

    })
    Vue.directive("demo", {
        bind(el) {
            el.innerHTML += "hello wh2110"
        }
    })

    Vue.directive("myColor", {
        bind(el) {
            el.style.color = "red"
        },
        inserted(el) {

        }
    })

    Vue.directive("myText", {
        bind(el, binding) {
            var s = JSON.stringify
            el.innerHTML +=
                'name: ' + s(binding.name) + '<br>' +
                'value: ' + s(binding.value) + '<br>' +
                'expression: ' + s(binding.expression) + '<br>' +
                'argument: ' + s(binding.arg) + '<br>' +
                'modifiers: ' + s(binding.modifiers) + '<br>';
        },
        inserted(el, binding) {
            el.style.fontSize = "40px"
            el.style.color = ""
        },
        update(el, bindings) {

        },
        unbind(el, bindings) {

        }

    })

    Vue.directive("myBg", {
        bind(el, binding) {
            console.log(binding);
            el.style.background = binding.value
        }
    })
    Vue.directive("myShow", {
        bind(el, binding) {
            el.style.display = binding.value ? "block" : "none"
        },
        update(el, binding) {
            el.style.display = binding.value ? "block" : "none"

        }
    })
    Vue.directive("myOn", {
        inserted(el, binding) {
            console.log(binding)
            el.addEventListener(binding.arg, binding.value, binding.modifiers.stop)
            // el.addEventListener('click',function(){},true)
        }
    })

    const vm = new Vue({
        // 局部注册指令
        directives: {
            border: {
                inserted(el) {
                    el.style.border = "1px solid red"
                    el.style.background = "green"
                }
            }
        },
        data: {
            title: "directive Vue自定义指令",
            changetext: "Text is Change BY ZKL",
            bg: "#999",
            show: true,
            count: 2110
        },
        methods: {
            changecount() {
                this.count++;
            }
        },
        mounted() {
            document.getElementsByTagName("title")[0].innerHTML = this.title;
        }
    }).$mount("#app")
</script>
<!-- 
    Vue 也允许注册自定义指令    操作底层DOM
    代码复用性和抽象的主要形式是组件（component 讲到这里）

    v-on    v-if    v-show  v-for   v-model v-bind v-else v-once v-text v-html  
    指令目的    作用    操作底层DOM

    指令durective
    v-开头  驼峰命名（单词之间  大写字母    变为小写字母 前面加-）newColor （W3C HTML 不准出现大写字母）
    
    全局定义    Vue.directive(name,{钩子函数}) Vue.filter
    局部定义    directives      filters

    指令钩子函数    一个指令定义对象可以提供钩子函数（操作指令的钩子函数）
    bind    指令第一次绑定到 元素时候调用   进行一些初始化操作  
    inserted    插入    被绑定元素插入父节点时候调用
    update      更新    数据或者DOM节点 更新
    unbind      之调用一次，指令与元素绑定时调用

    钩子函数 有几个参数（el binding）
    el 绑定的DOM
    binding 指令携带的变量数据

    name 指令名
    value   指令的值    最重要  binding.value
    expression  指令对应的表达式    变量名称
    argument    指令的参数 v-on：click  click   args  冒号声明的
    modifiers   指令的修饰符    v-on.stop:click stop 修饰符

    v-slot 分发
    v-pre 
    v-cloak 锁住DOM
 -->

</html>